//设置
import React, { Component } from 'react'
import {
    View,
    Text,
    Image,
    TouchableOpacity,
} from 'react-native';

import { Cattestation_Style as styles } from '../../../../styles';
import Icon from 'react-native-vector-icons/Ionicons';
import { common_url, upLoading, fetchRequest } from '../../../util/fetch';
import Modal from 'react-native-modal';
//图片选择器
import ImagePicker from 'react-native-image-crop-picker';

var Dimensions = require('Dimensions');
var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;

export default class Cattestation_body extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isModalVisible2: false,
        };
    }

    _showModal2 = () => this.setState({ isModalVisible2: true });
    _hideModal2 = () => this.setState({ isModalVisible2: false });


    state = {
        isModalVisible: false,
    }

    _showModal = () => this.setState({ isModalVisible: true })
    _hideModal = () => this.setState({ isModalVisible: false })

    render() {
        return (
            <View style={[styles.att_all, { width: width * 1 }]}>
                <Text style={styles.att_text1}>请上传营业执照</Text>

                <View style={[styles.att_center, { width: width * 0.85 }]}>
                    <Image
                        source={this.props.xzCompany.licence ? { uri: common_url + "uploadImg/" + this.props.xzCompany.licence } : require('../../../img/app/com.jpg')}
                        //source={require('../../../img/app/com.jpg')}
                        style={[styles.att_img2, { width: width * 0.7, height: height * 0.3 }]} />
                    <TouchableOpacity onPress={this._showModal2} style={styles.cat_row} activeOpacity={1}>
                        <Text style={styles.att_text3}>认证须知</Text>
                        <Icon
                            name={'md-help-circle'}
                            size={22}
                            color={'#aeaeae'} />
                    </TouchableOpacity>

                    <TouchableOpacity
                        style={[styles.att_button, { width: width * 0.8, marginTop: height * 0.17 }]}
                        activeOpacity={1}
                        onPress={this._showModal}>
                        <Text style={styles.att_butin}>上传照片</Text>
                    </TouchableOpacity>

                </View>

                <Modal isVisible={this.state.isModalVisible}
                    animationIn={'slideInLeft'}
                    animationOut={'slideOutRight'}>
                    <View style={styles.modal_in}>
                        <View style={styles.modal_touch}>
                            <TouchableOpacity onPress={this.xiangc.bind(this)} style={styles.modal_but}>
                                <Text style={styles.modal_txt1}>图库</Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={this.pais.bind(this)} style={styles.modal_but}>
                                <Text style={styles.modal_txt1}>拍摄</Text>
                            </TouchableOpacity>
                        </View>
                        <TouchableOpacity style={styles.modal_butb}>
                            <Text onPress={this._hideModal} style={styles.modal_yes}>取消</Text>
                        </TouchableOpacity>
                    </View>
                </Modal>

                <Modal isVisible={this.state.isModalVisible2}
                    animationIn={'slideInLeft'}
                    animationOut={'slideOutRight'}>
                    <View style={styles.modal_in2}>
                        <Text style={styles.cat_text}>上传公司营业执照正面，确保信息清晰可见</Text>
                        <Text style={styles.cat_text}>营业执照上的公司全称，与您个人信息中的公司全称一致</Text>
                        <Text style={styles.cat_text}>审核过程一般为1~3个工作日，请您耐心等待。审核结果会通过推送消息发送给您。</Text>
                        <Text style={styles.cat_text}>如果您更换了公司，需要重新进行公司认证</Text>
                        <TouchableOpacity style={styles.cat_no} onPress={this._hideModal2}>
                            <Icon
                                name={'md-close'}
                                size={22}
                                color={'#aeaeae'} />
                        </TouchableOpacity>
                    </View>
                </Modal>
            </View>
        )
    }
    //相册选择
    xiangc() {
        ImagePicker.openPicker({
            width: 300,
            height: 400,
            cropping: true,
            cropperCircleOverlay: true
        }).then(image => {
            // this.setState({
            //     avatarSource: { uri: image.path }
            // });
            this._upload(image);
            this._hideModal()
        }).catch(e => {
            this._hideModal()
        });
    }

    //拍摄选择
    pais() {
        ImagePicker.openCamera({
            width: 300,
            height: 400,
            cropping: true,
            cropperCircleOverlay: true
        }).then(image => {
            this.setState({
                avatarSource: { uri: image.path }
            });
            this._upload(image);
            this._hideModal()
        }).catch(e => {
            this._hideModal()
        });
    }

    _upload(image) {
        upLoading("upload/img.go", image).then(
            e => {
                if (e.msg == "ok") {
                    fetchRequest("CompanyInfo/updateCompanyLicMob.go", "POST", { imgName: e.imgName }).then(e => {
                        this.props.actions.SelCompanyMobAction()
                    })

                }
            }
        )
    }

}